<template>
  <view class="page container">
    <view class="pt-32 pb-32">
      <u-swiper keyName="image" indicatorMode="dot" indicator :list="bannerList" height="320rpx" radius="12rpx"
        indicatorInactiveColor="#fff" indicatorActiveColor="#C5261D" @click="clickBanner"></u-swiper>
    </view>
    <view class="pl-20 pr-20 flex-between-center">
      <view class="flex-column flex-column-center" v-for="btn in cateTopList" :key="btn.id" @click="goPage(btn)">
        <image :src="btn.image" class="w-96 h-96"></image>
        <text class="mt-16 fs-28 fw-500">{{ btn.title }}</text>
      </view>
    </view>
    <view class="flex-between-center mt-32 mb-26 btns2">
      <view class="w-328 h-172 bgc-fff br-12 flex-between-center" v-for="btn in cateBtmList" :key="btn.id"
        @click="goPage(btn)">
        <image :src="btn.image" class="w-116 h-116" style="border-radius: 50%"></image>
        <view class="right">
          <text class="fs-30 fw-600">{{ btn.title }}</text>
          <view style="
              background-color: rgba(197, 38, 29, 0.06);
              border-radius: 80rpx;
            " class="flex-center-center mt-26 w-104 h-40 fs-24">
            查看
          </view>
        </view>
      </view>
    </view>
    <!-- 精彩推荐 -->
    <view class="tuijian bgc-fff">
      <view class="tuijian-title flex-column-center">
        <view class="w-6 h-34 bgc-c5261d mr-14" style="border-radius: 40rpx"></view>
        <text class="fs-32 fw-500">精彩推荐</text>
      </view>
      <z-paging :use-page-scroll="true" :refresher-enabled="false" :default-page-size="10" ref="pagingRef"
        v-model="dataList" @query="queryList">
        <view class="pt-28 pb-28" v-for="(item, index) in dataList" :key="index">
          <information-card :info="item" />
        </view>
      </z-paging>
    </view>
  </view>
</template>

<script>
import { newsCateApi, newsListApi, navListApi, bannerListApi } from "@/services/home";
import { configApi } from "@/services/common.js";
import InformationCard from "@/components/rowCards/InformationCard";
export default {
  components: {
    InformationCard,
  },
  data() {
    return {
      cateTopList: [],
      cateBtmList: [],
      dataList: [],
      swiperList: [
        "https://uviewui.com/swiper/swiper1.png",
        "https://uviewui.com/swiper/swiper2.png",
        "https://uviewui.com/swiper/swiper3.png",
      ],
      videoCover: "/static/home/矩形 1@2x.png", // Pixabay的免费封面图
      videoSource: "https://cdn.pixabay.com/vimeo/147557920/earth-5371.mp4", // Pixabay的免费测试视频
      home_btns: [
        {
          icon: "/static/information/yxzs-btn.png",
          name: "营销知识",
        },
        {
          icon: "/static/information/hygx-btn.png",
          name: "行业供销",
        },
        {
          icon: "/static/information/cpcp-btn.png",
          name: "产品测评",
        },
        {
          icon: "/static/information/zsjh-btn.png",
          name: "招商机会",
        },
      ],
      bannerList: [],
    };
  },
  onLoad() {
    this.getNewsCate();
    // this.getConfig();
    // this.getNavList();
    this.getBannerList();
  },
  onReachBottom() {
    this.$refs.pagingRef?.doLoadMore();
  },
  methods: {
    clickBanner(index) {
      // const id = this.bannerList[index]?.id || '';
      // if (!id) return;
      // this.$utils.to(`/pages2/information/information_detail?id=${id}`);
    },
    getBannerList() {
      bannerListApi({ position: 1 }).then((res) => {
        this.bannerList = res.data?.banner_list || [];
      });
    },
    getNewsCate() {
      newsCateApi().then((res) => {
        this.cateTopList = res.data?.cate_list?.filter(item => item.type == 0) || [];
        this.cateBtmList = res.data?.cate_list?.filter(item => item.type == 1) || [];
      });
    },
    queryList(page, page_size) {
      newsListApi({
        page,
        page_size,
        is_recommend: 1
      }).then((res) => {
        this.$refs.pagingRef?.complete(res.data?.data || []);
      });
    },
    getNavList() {
      navListApi().then((res) => {
        const navList =
          res.data?.nav_list?.map((item) => {
            return {
              ...item,
              name: item.title,
              icon: item.image,
            };
          }) || [];
      });
    },
    getConfig() {
      configApi().then((res) => {
        this.videoCover = res.data?.video_image;
        this.videoSource = res.data?.video_url;
      });
    },
    goPage(btn) {
      console.log(btn);
      this.$utils.to(`/pages2/information/information_list?id=${btn.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f7f8fa;
  padding: 0 28rpx;
  padding-bottom: 20rpx;

  .btns2 {
    &>view {
      box-sizing: border-box;
      padding: 0 24rpx;

      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }

  .swiper {
    height: 240rpx;
  }

  .banner-box {
    height: 240rpx;
    // margin: 32rpx 0;
    position: relative;

    &>text {
      position: absolute;
      top: 24rpx;
      left: 24rpx;
      color: #fff;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 2rpx;
    }

    &>image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }

  .tuijian {
    margin-left: -28rpx;
    margin-right: -28rpx;
    padding: 32rpx 28rpx;
  }
}
</style>